<template>
	<div class="app-container">
		<el-form ref="queryForm" :model="queryParams" :inline="true">
			<el-form-item label="合同编号:">
				<el-input v-model="queryParams.contractNo" size="small" placeholder="请输入合同编号" clearable />
			</el-form-item>
			<el-form-item label="客户名称:">
				<el-input v-model="queryParams.customerNo" size="small" placeholder="请输入客户名称" clearable />
			</el-form-item>
			<el-form-item label="物品名称:">
				<el-input v-model="queryParams.materialName" size="small" placeholder="请输入物品名称" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<el-col :span="12">
				<div id="main1" style="width:100%;height:500px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="main2" style="width:100%;height:500px;"></div>
			</el-col>
		</el-row>
		<el-row gutter="24">
			<el-col :span="12">
				<el-table :data="dataList" highlight-current-row style="border:1px solid #eeeeee;margin:20px">
					<el-table-column label="序号" type="index" width="55" align="center" />
					<el-table-column label="订单类型" align="center" prop="rukudan" />
					<el-table-column label="出库单" align="center" prop="chukudan" />
					<el-table-column label="订单时间" align="center" prop="orderTime" />
					<el-table-column label="发票号" align="center" prop="fapiaohao" />
					<el-table-column label="结算依据" align="center" prop="jiesuanyiju" />
					<el-table-column label="物品名称" align="center" prop="mingcheng" />
					<el-table-column label="物品数量" align="center" prop="shuliang" />
					<el-table-column label="金额" align="center" prop="jine" />
				</el-table>
			</el-col>
			<el-col :span="12">
				<el-table :data="dataList" highlight-current-row style="border:1px solid #eeeeee;margin:20px">
					<el-table-column label="序号" type="index" width="55" align="center" />
					<el-table-column label="订单类型" align="center" prop="rukudan" />
					<el-table-column label="订单号" align="center" prop="chukudan" />
					<el-table-column label="订单时间" align="center" prop="orderTime" />
					<el-table-column label="发票号" align="center" prop="fapiaohao" />
					<el-table-column label="结算依据" align="center" prop="jiesuanyiju" />
					<el-table-column label="物品名称" align="center" prop="mingcheng" />
					<el-table-column label="物品数量" align="center" prop="shuliang" />
					<el-table-column label="金额" align="center" prop="jine" />
				</el-table>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'acctCheckView',
		data() {
			return {
				queryParams: {
					contractNo: '',
					customerNo: '',
					materialName: '',
				},
				dataList: [{
						rukudan: '入库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '入库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '入库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '出库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '出库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '入库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '入库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '入库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '出库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '出库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					},
					{
						rukudan: '入库单',
						chukudan: '202308070001',
						orderTime: '2023/08-06',
						fapiaohao: '202308071110001',
						jiesuanyiju: '重量',
						mingcheng: '雨刮器',
						shuliang: '100',
						jine: '1000'
					}
				]
			}
		},
		mounted() {
			this.initChart1()
			this.initChart2()
		},
		methods: {
			handleQuery() {},
			resetQuery() {},
			initChart1() {
				let myEchart = this.$echarts.init(document.getElementById("main1"));
				let option = {
					title: {
						text: '收入'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: ['收入']
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: '#f093fb' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#f5576c' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '收入',
						type: 'line',
						stack: 'Total',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: [120, 132, 101, 134, 90, 230]
					}]
				};
				myEchart.setOption(option);
			},
			initChart2() {
				let myEchart = this.$echarts.init(document.getElementById("main2"));
				let option = {
					title: {
						text: '成本'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: ['成本']
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: '#ff0844' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#ffb199' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '收入',
						type: 'line',
						stack: 'Total',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: [120, 132, 101, 134, 90, 230]
					}]
				};
				myEchart.setOption(option);
			}
		}
	}
</script>

<style>
</style>